import React, { Component } from "react";
import { FlatList, StyleSheet, Text, View } from "react-native";

/**
 *  RN 提供了几个适用于展示长列表数据的组件，一般而言我们会选择用 FlatList 或者是 SectionList
 * */

/**
 *  FlatList 组件用于显示一个垂直的滚动列表，其中的元素之间的结构近似而且仅数据不同
 *  FlatList 更适用于长列表数据，且元素个数可以增删。和 ScrollView 不同的是，FlatList 并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
 *  FlatList 组件必须的两个属性是 data 和 renderItem，data 是列表的数据源，而 renderItem 则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。
 * */

export default class FlatListBasics extends Component {
  render() {
    const data = [
      { key: "xusheng" },
      { key: "xusheng" },
      { key: "xusheng" },
      { key: "xusheng" },
      { key: "xusheng" },
      { key: "xusheng" },
      { key: "xusheng" },
      { key: "xusheng" },
      { key: "xusheng" },
      { key: "xusheng" },
      { key: "xusheng" },
      { key: "xusheng" },
      { key: "xusheng" },
      { key: "xusheng" },
      { key: "xusheng" },
      { key: "xusheng" },
      { key: "xusheng" },
      { key: "xusheng" }
    ];
    return (
      <View style={styles.container}>
        <FlatList
          data={data}
          renderItem={({ item }) => <Text style={styles.item}>{item.key}</Text>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    // flex: 1,
    paddingTop: 22,
    height: 400
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44
  }
});
